<template>

    <el-dialog title="编辑" :visible="liveEditShow" @close="dialogClose" width="45%">

        <el-form :model="ruleForm" :rules="rules" ref="liveEdit" label-width="auto" class="demo-ruleForm">
            <el-form-item label="直播间ID：" prop="roomId">
                <el-input type="text" v-model="ruleForm.roomId"></el-input>
            </el-form-item>
            <el-form-item label="直播间名称：" prop="roomName">
                <el-input type="text" v-model="ruleForm.roomName"></el-input>
            </el-form-item>
            <el-form-item label="拍卖会：" prop="place">
                <el-input type="text" v-model="ruleForm.place"></el-input>
            </el-form-item>
            <el-form-item label="拍卖师名称：" prop="name">
                <el-input type="text" v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="发布公告时间：" prop="date2">
                <el-date-picker v-model="ruleForm.date2" type="datetime" placeholder="选择日期时间" style="width:100%">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="推流地址：" prop="address">
                <el-input type="text" v-model="ruleForm.address"></el-input>
            </el-form-item>
            <el-form-item label="直播平台：" prop="app">
                <el-select v-model="ruleForm.app" style="width:100%" clearable>
                    <el-option label="淘宝" value="淘宝"></el-option>
                    <el-option label="抖音" value="抖音"></el-option>
                    <el-option label="虎牙" value="虎牙"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注：">
                <el-input type="textarea" :rows="4" v-model="ruleForm.remarks">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()" class="pull-right margin-l-25">确定
                </el-button>
                <el-button @click="dialogClose" class="pull-right">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>
<script>
export default {
    name:'liveEdit',
    data () {
        return {
            ruleForm: {
                roomId: '',
                roomName: '',
                place: '',
                name: '',
                date2: '',
                address: '',
                app: '',
                id: ''
            },

            liveEditShow: false,

            rules: {
                roomId: [
                    { required: true, message: '直播间ID', trigger: 'change' }
                ],
                roomName: [
                    { required: true, message: '请输入直播间的名称', trigger: 'change' }
                ],
                place: [
                    { required: true, message: '请选择一场拍卖会', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '请选择拍卖师', trigger: 'change' }
                ],
                date2: [
                    { required: true, message: '请选择日期', trigger: 'change' }
                ],
                address: [
                    { required: true, message: '请输入推流地址', trigger: 'change' }
                ],
                app: [
                    { required: true, message: '请选择直播平台', trigger: 'change' }
                ]
            }
        };
    },
    props: {
        liveEditShow: {
            type: Boolean
        },
        record: {
            type: Object
        }
    },
    methods: {

        submitForm () {
            this.$refs.liveEdit.validate((valid) => {
                if (valid) {
                    this.$emit('dialogClose')
                }
                else {
                    return
                }
            });
        },

        // 重置
        // resetForm (formName) {
        //     this.$refs[formName].resetFields();
        // },
        dialogClose () {
            this.$emit('dialogClose')
        }
    },
    mounted () {
        console.log(this.record)
        this.ruleForm = this.record
    }


}
</script>
<!-- <style lang="less" scoped>

</style> -->